<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>GValidator Custom Configuration Example</title>  
  <link rel="stylesheet" type="text/css" href="../css/gvalidator.css" media="screen"/>
</head>
<body>
  <h1>GValidator Custom Configuration Example</h1>  
  <p>This form should use the specific configuration options, from gvalidator-custom-configuration.js .</p>
  <p>In addition to the custom configuration options, the form is using an english translation file (gvalidator_EN.js) to override the content for the 'firstname' field. Try it out.</p>
  <p>Fields marked with a <span class="required">^</span> are required.</p>
  <div id="errors" class="hidden">
    <h3>Please correct the following errors</h3>
  </div> 
   <form action="/" method="post" id="example-custom-form" class="autoform custom" lang="EN">
    <div><label for="firstname">First Name</label><input tabindex="1" type="text" name="firstname" class="firstname required" id="firstname" maxlength="30"/></div>    
    <div><label for="lastname">Last Name</label><input tabindex="2" type="text" name="lastname" class="lastname required" id="lastname" maxlength="30"/></div>
    <div><label for="lastnamenr">Last Name (Not Required)</label><input tabindex="3" type="text" name="lastnamenr" class="lastname" id="lastnamenr" maxlength="30"/></div>
		<div><label for="subject">Subject</label><input tabindex="4" type="text" name="subject" class="text required" id="subject" maxlength="30"/></div>
		<div><label for="captcha">Captcha</label><input tabindex="5" type="text" name="captcha" class="captcha required" id="captcha" maxlength="30"/></div>
    <div><label for="phone">Phone</label><input tabindex="6" type="text" name="phone" class="phone required" id="phone" maxlength="12"/></div>
    <div><label for="email">Email</label><input tabindex="7" type="text" name="email" class="email required" id="email" maxlength="60"/></div>
    <div><label for="text">Text</label><input tabindex="8" type="text" name="text" class="text required" id="text" maxlength="60"/></div>
    <div><label for="mtext">More Text</label><input tabindex="9" type="text" name="mtext" class="text" id="mtext" maxlength="60"/></div>
    <div id="addressdiv"><label for="address">Address</label><input tabindex="10" type="text" name="address" class="text required" id="address" maxlength="60"/></div>
    <div>
      <label for="howfound">How did you find us?</label>
      <select tabindex="11" id="howfound" name="howfound" class="select required">
        <option value="">[select an option]</option>
        <option value="google">Google</option>
        <option value="yellowpagesonline">Yellow Pages Online</option>
        <option value="yellowpages">Yellow Pages</option>
        <option value="othersearchengine">Other search engine</option>
        <option value="Other">Other</option>
      </select>
    </div>  
    <div>
      <label for="howfound">No need to answer</label>
      <select tabindex="12" id="notrequiredselect" name="notrequiredselect" class="select">
        <option value="">[select an option]</option>
        <option value="google">Test 1</option>
        <option value="yellowpagesonline">Test 2</option>
      </select>
    </div>     
    <div id="radiodiv">
	    <fieldset>
	      <legend>Sex</legend>
        <input tabindex="13" type="radio" id="male" name="sex" value="male" class="radio required"/><label class="radio" for="male">Male</label>
        <input tabindex="14" type="radio" id="female" name="sex" value="female" class="radio required"/><label class="radio" for="female">Female</label>
      </fieldset>
    </div> 
    <div id="radiodiv2">
			<fieldset>
				<legend>Age bracket</legend>
	      <input tabindex="15" type="radio" id="age1" name="age" value="20" class="radio"/><label class="radio required" for="age1">&lt; 100</label>
    	  <input tabindex="16" type="radio" id="age2" name="age" value="50" class="radio"/><label class="radio required" for="age2">100+</label>
    	</fieldset>
    </div> 
    <div id="checkboxdiv">
      <fieldset>
        <legend>Select Subscriptions</legend>
        <input tabindex="17" type="checkbox" id="css" name="news" value="css" class="checkbox required"/><label class="checkbox" for="css">CSS</label>
        <input tabindex="18" type="checkbox" id="javascript" name="news" value="javascript" class="checkbox required"/><label class="checkbox" for="javascript">JavaScript</label>
        <input tabindex="19" type="checkbox" id="usability" name="news" value="usability" class="checkbox required"/><label class="checkbox" for="usability">Usability</label>
      </fieldset>
    </div>
    <div id="checkboxdiv2">
	    <fieldset>
	      <legend>Source code</legend>
	      <label for="checkboxdiv2" class="checkbox-label">Source Code</label>
	      <input tabindex="20" type="checkbox" id="source" name="download" value="source" class="checkbox"/><label class="checkbox" for="source">Source</label>
	      <input tabindex="21" type="checkbox" id="compressed" name="download" value="compressed" class="checkbox"/><label class="checkbox" for="compressed">Compressed</label>
	    </fieldset>
    </div> 
    <div id="submitdiv"><input tabindex="22" id="submit" type="submit"/><input tabindex="23" type="reset" /></div> 
  </form>   

  <h1>GValidator Normal Example</h1>  
  <p>This form should use the generic configuration options, 
    and highlights how the configuration for different forms can be easily separated by using standard W3C attributes.</p>   
  
  <form action="/" method="post" id="example-normal-form" class="autoform">
    <div><label for="firstname">First Name</label><input tabindex="23" type="text" name="firstname" class="firstname required" id="firstname2" maxlength="30"/></div>    
    <div><label for="lastname">Last Name</label><input tabindex="24" type="text" name="lastname" class="lastname required" id="lastname2" maxlength="30"/></div>
    <div><label for="lastnamenr">Last Name (Not Required)</label><input tabindex="25" type="text" name="lastnamenr" class="lastname" id="lastnamenr2" maxlength="30"/></div>
    <div><label for="subject">Subject</label><input tabindex="26" type="text" name="subject" class="text required" id="subject2" maxlength="30"/></div>
    <div><label for="captcha">Captcha</label><input tabindex="27" type="text" name="captcha" class="captcha required" id="captcha2" maxlength="30"/></div>
    <div><label for="phone">Phone</label><input tabindex="28" type="text" name="phone" class="phone required" id="phone2" maxlength="12"/></div>
    <div><label for="email">Email</label><input tabindex="29" type="text" name="email" class="email required" id="email2" maxlength="60"/></div>
    <div><label for="text">Text</label><input tabindex="30" type="text" name="text" class="text required" id="text2" maxlength="60"/></div>
    <div><label for="mtext">More Text</label><input tabindex="31" type="text" name="mtext" class="text" id="mtext2" maxlength="60"/></div>
    <div><input id="submit2" tabindex="32" type="submit"/><input tabindex="33" type="reset" /></div>
  </form>
  <script type="text/javascript" src="../js/compressed/gvalidator.js" defer="defer"></script>
  <script type="text/javascript" src="../js/compressed/examples/gvalidator_EN.js" defer="defer"></script>
  <script type="text/javascript" src="../js/compressed/examples/gvalidator-config.js" defer="defer"></script>
  </body>
</html>